
import './Index.css'
import Nav from '../../components/nav/Nav'
import IndexList from '../../components/index-list/Index-List'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux';
import { ChatOption } from 'grommet-icons';
import { delay } from '../../utils/utils'
function Index () {
  const navigate = useNavigate();
 
  const toProject = (path) => {

    if (window.socket) {
      window.socket.sendMessage({
        code: "3",
        receiverId: "twlchat",
        senderId: localStorage.getItem("WsUid"),
      })

    }
    delay(path, 0.2, navigate);
  }
  setTimeout(()=>{ 
    window.socket.sendMessage({
    code: "4",
    receiverId:localStorage.getItem("WsUid"),
    senderId:  "twlchat",
  })},500)
 

  const list = [
    {
      path: "/personaldata/project",
      title: "项目库",
      image: "https://img-blog.csdnimg.cn/2a3c9c2bd221482d9f47329c9136716a.png#pic_center",
      info: "平时写的项目和小Demo"
    }, {
      path: "/personaldata/user",
      title: "个人信息",
      image: "https://ahead-langke.gitee.io/picture-storage/resume/userinfo/20231102201150.jpg",
      info: "让你更好的了解我"
    }, {
      path: "",
      title: "其他",
      image: "https://ahead-langke.gitee.io/picture-storage/resume/userinfo/c7dc6e0baedc0ffbba61b7aca4508e38_hd.jpg",
      info: "其他的信息"
    }
  ]
  const count = useSelector(state => state.chat.chatsum);
  return (
    <div>
      <Nav isindex={true} content={'个人资料库'} />
      <div className='global index-local'>
        {
          Object.keys(list).map((item, index) => {
            return <IndexList key={item} path={list[item].path} title={list[item].title} image={list[item].image} info={list[item].info} navigate={navigate} />
          })
        }
      </div>
      <div className='index-massage' onClick={toProject.bind(this, "/personaldata/chat")}>
        <div className='index-icon'>
          <ChatOption color='plain' />
          <div className="index-msg-sum">
            {count}
          </div>
        </div>
      </div>
    </div >
  );
}

export default Index;